<template>
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
		<view style="line-height: 60rpx; font-size: 35rpx; padding: top 20rpx; text-align: center; background-color: #fff">套餐明细</view>
		<scroll-view class="detailpupop-container" scroll-y>
			<view class="series" v-for="(item, index) in temporaryList" :key="item.group_name">
				<view class="title">{{ item.group_name }}</view>
				<view class="series-item" v-for="group in item.values" :key="item.id">
					<view class="product" v-if="group.selectQuantity">
						<view class="left">
							<view>
								<view class="name">{{ group.foodName }}</view>
								<view v-if="group.otherData.length > 0">
									<view class="other" v-for="v in group.materials" :key="v.group_name">
										<text class="materials-name">{{ v.group_name }} :</text>
										<text v-for="e in v.values" :key="e.groupId">
											<text v-for="val in e.items" :key="val.id">
												<text style="margin-right: 10rpx" v-if="val.is_selected">{{ val.fName }}</text>
											</text>
										</text>
									</view>
								</view>
							</view>

							<view class="price" v-if="group.price">+ {{ group.price * group.quantity }}</view>
						</view>

						<view class="quantity">× {{ group.quantity }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</uni-popup>
</template>

<script>
export default {
	props: {
		temporaryList: {
			type: Array,
			default: []
		}
	},
	methods: {
		open() {
			this.$refs.popup.open();
			// console.log(this.temporaryList);
		}
	}
};
</script>

<style lang="scss" scoped>
.detailpupop-container {
	background-color: #fff;
	width: 100%;
	height: 800rpx;
	.series {
		padding: 30rpx;
		.title {
			font-weight: 600;
			font-size: 30rpx;
			border-left: 4rpx solid #edac2f;
			padding-left: 20rpx;
		}
		.product {
			padding: 20rpx 0;
			display: flex;
			.left {
				flex: 1;
				display: flex;
				justify-content: space-between;
				.name {
					font-size: 30rpx;
				}
				.other {
					color: #a2a2a4;
					font-size: 24rpx;
				}
				.price {
					font-size: 30rpx;
				}
			}
			.quantity {
				text-align: right;
				width: 120rpx;
			}
		}
	}
}
</style>
